<script setup lang="ts">
import { computed, ref, watch } from 'vue'

// 定义水果对象的类型
interface Fruit {
  id: number
  icon: string
  isChecked: boolean
  num: number
  price: number
}

// 持久化存储列表的键
const LIST_KEY = '__fruit_list__'
// 获取本地存储中的列表
const res = localStorage.getItem(LIST_KEY)
// 临时水果列表
let list: Fruit[] = []
// 判断是否为空
if (res === null) {
  // 为空则设置初始值
  list = [
    {
      id: 1,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
      isChecked: true,
      num: 2,
      price: 6,
    },
    {
      id: 2,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
      isChecked: false,
      num: 7,
      price: 20,
    },
    {
      id: 3,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
      isChecked: false,
      num: 3,
      price: 40,
    },
    {
      id: 4,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
      isChecked: false,
      num: 10,
      price: 3,
    },
    {
      id: 5,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
      isChecked: false,
      num: 20,
      price: 34,
    },
  ]
} else {
  // 不为空则直接使用硬盘中的值
  list = JSON.parse(res)
}
// 水果列表
const fruitList = ref<Fruit[]>(list)

// 侦听器，侦听列表数据是否发生变化
watch(
  fruitList,
  () => {
    // 持久化存储数据
    localStorage.setItem(LIST_KEY, JSON.stringify(fruitList.value))
  },
  {
    // 开启深度侦听
    deep: true,
  },
)
// 删除商品函数
const delFruit = (id: number) => {
  // 直接通过id过滤
  // fruitList.value = fruitList.value.filter((item) => item.id !== id)

  // 通过id找到索引删除
  const index = fruitList.value.findIndex((item) => item.id == id)
  fruitList.value.splice(index, 1)
}
// 商品个数增加函数
const addNum = (id: number) => {
  // 通过id找到对应的商品
  const item = fruitList.value.find((item) => item.id == id)
  // 累加
  item!.num++
}
// 商品个数减少函数
const reduceNum = (id: number) => {
  // 通过id找到对应的商品
  const item = fruitList.value.find((item) => item.id == id)
  // 累减
  if (item!.num > 0) {
    item!.num--
  }
}
// 全选商品（计算属性）
const isCheckedAll = computed({
  get() {
    // 判断每一项是否都为选中
    return fruitList.value.every((item) => item.isChecked)
  },
  set(value) {
    // 同过set获取当前全选按钮的值，赋值给列表中的所有单项
    fruitList.value.forEach((item) => (item.isChecked = value))
  },
})
// 计算水果总个数的函数
const totalNum = computed(() => {
  // 1. 获取选中商品
  const checkedList = fruitList.value.filter((item) => item.isChecked)
  // 2. 累加
  return checkedList.reduce((prev, item) => {
    return prev + item.num
  }, 0)
})
// 计算总价函数
const totalPrice = computed(() => {
  // 1. 获取选中商品
  const checkedList = fruitList.value.filter((item) => item.isChecked)
  // 2. 累加
  return checkedList.reduce((prev, item) => {
    return prev + item.price * item.num
  }, 0)
})
// 还原数组函数
const reset = () => {
  fruitList.value = [
    {
      id: 1,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
      isChecked: true,
      num: 2,
      price: 6,
    },
    {
      id: 2,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
      isChecked: false,
      num: 7,
      price: 20,
    },
    {
      id: 3,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
      isChecked: false,
      num: 3,
      price: 40,
    },
    {
      id: 4,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
      isChecked: false,
      num: 10,
      price: 3,
    },
    {
      id: 5,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
      isChecked: false,
      num: 20,
      price: 34,
    },
  ]
}
</script>

<template>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box">
      <img src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/sg_top.png" alt="" />
    </div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 购物车主体 -->
    <div class="main" v-if="fruitList.length > 0">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <div class="tr active" v-for="item in fruitList" :key="item.id">
            <!-- 选中 -->
            <div class="td"><input type="checkbox" v-model="item.isChecked" checked /></div>
            <div class="td">
              <img :src="item.icon" alt="" />
            </div>
            <!-- 单价 -->
            <div class="td">{{ item.price }}</div>
            <div class="td">
              <div class="my-input-number">
                <button class="decrease" @click="reduceNum(item.id)">-</button>
                <!-- 个数 -->
                <span class="my-input__inner">{{ ref(item.num) }}</span>
                <button class="increase" @click="addNum(item.id)">+</button>
              </div>
            </div>
            <!-- 小计 -->
            <div class="td">{{ item.num * item.price }}</div>
            <!-- 删除 -->
            <div class="td"><button @click="delFruit(item.id)">删除</button></div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <input type="checkbox" v-model="isCheckedAll" />
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box"
            >总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice }}</span></span
          >
          <!-- 结算按钮 -->
          <button class="pay">结算( {{ totalNum }} )</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div class="empty" v-else @click="reset">🛒空空如也</div>
  </div>
</template>

<style scoped>
/* css中的导入语法 */
@import './style/inputnumber.css';
@import './style/index.css';
</style>
